<template>
	<view :class="currentTheme">
		<a-nabbar name="商品详情" />
		<u-swiper height="634" :list="bannerList" @click="bannerListPreview"></u-swiper>
		<view class="padding-env" >
			<view class="u-padding-32">
				<!-- 剧本信息 -->
				<list-item :isImage="false" :item="item" :isList="false" :starSize="40" collectionType="mallCollection" @issueClick="getIssue"></list-item>
				<!-- 授权城市 -->
				<view class="u-margin-top-20 u-margin-bottom-20" v-if="item.issueModeName=='城限' || item.issueModeName=='独家'">
				<!-- <view class="u-margin-top-20 u-margin-bottom-20"> -->
					<item-box :padding="32">
						<view class="u-flex u-row-between u-margin-bottom-40">
							<view class="u-font-32 box-title">
								<text>授权城市</text>
							</view>
							<view class="u-font-22" @click="moreCity">
								<text>查看全部</text><u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<!-- 定位城市 -->
						<view class="u-margin-bottom-40 u-flex">
							<view class="box-title u-font-30">定位城市</view>
							<view class="text-color-txtTheme  u-font-26 u-flex">
								<view class="u-margin-left-10 u-margin-right-10">
									<u-icon name="weizhi" custom-prefix="custom-icon" :color="currentThemeObj.primary" size="20" ></u-icon>
								</view>
								{{currentCity.cityName || '定位中...'}}
								<view class="u-margin-left-10" v-if="currentCity.totalNumber">{{currentCity.grantNumber}}/{{currentCity.totalNumber}}本</view>
								<view class="box-title u-margin-left-10" v-else>（暂未授权）</view>
							</view>
						
						</view>
						<!-- 城市列表 -->
						<view>
							<view class="box-title u-font-30">其他城市</view>
							
							<view class="u-padding-top-20 bg-white u-margin-bottom-20">
								<u-row>
									<u-col span="4" v-for="(item,i) in cityList" :key="i">
										<view class="u-margin-bottom-28 u-flex u-row-center">
											<cityBtn width="225" :showDelete="false" :item="item"></cityBtn>
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
					</item-box>
				</view>
				<!-- 评价 -->
				<view class="u-margin-top-20 u-margin-bottom-20">
					<item-box :padding="32">
						<view class="u-flex u-row-between">
							<view class="u-font-32">
								<text>剧本评价</text>
								<text v-if="replyListTotal>0">({{replyListTotal}}条)</text>
							</view>
							<view class="u-font-22" @click="moreReply">
								查看更多 <u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view>
							<template v-if='replyList.length'>
								<reply-item  v-for="(item,index) in replyList" :key="index" :item="item" :showProductName="false"></reply-item>
							</template>
							<empty v-else></empty>
							<!-- <view class="u-text-center u-font-28 text-color-DEDEDE" v-else>暂无评测记录</view> -->
						</view>
					</item-box>
				</view>
			</view>
			<view v-if="item.description">
				<rich-text :nodes="item.description"></rich-text>
			</view>
		</view>
		<view v-if="!isDM&&!isIssue">
			<fixed-team>
				<view class="u-flex u-row-between u-flex-1">
					<view>
						<item-btn type="plain" width="323" height="88" @click="addCar">加入购物车</item-btn>
					</view>
					<view>
						<item-btn width="323" height="88" @click="submit">购买</item-btn>
					</view>
				</view>
			</fixed-team>
		</view>
	</view>
</template>

<script>
	import listItem from "./list-item.vue"
	import {getDetail,customRequest,add,getList} from '@/api/crud.js'
	import {mapGetters} from 'vuex'
	import price from '@/components/price/price.vue'
	import  settlement from '@/mixins/settlement.js'
	import replyItem from '@/components/replyItem/replyItem.vue'
	import cityBtn from './button.vue'
	import empty from '@/components/mescroll-uni/components/mescroll-empty.vue'
	import amap from '@/utils/amap-wx.130'
	import {formatLocation} from '@/utils'
	export default {
		mixins:[settlement],
		components:{
			listItem,price,replyItem,cityBtn,empty
		},
		data() {
			return {
				apiModule:'shopApi',
				replyListTotal:0,
				replyList:[],
				item:{},
				cityList:[],
				amapPlugin:"",
				aois:{},
				allCityList:[]
			};
		},
		computed:{
			tags(){
				return this.splitStr(this.item.categoryDescription)
			},
			bannerList(){
				const img = this.splitStr(this.item.sliderImage)
				return img.map(this.imgFilter)
			},
			...mapGetters(['loginForm']),
			isDM(){
				return this.loginForm.clerkRole ==='DM'
			},
			isIssue(){
				return this.loginForm.userType ==='issue'
			},
			currentCity(){
				// const {REGION_CITY,REGION_COUNTRY,REGION_PROVINCE} = this.aois;
				// const findCity = this.allCityList.find(val=>val.cityName.indexOf(REGION_CITY||REGION_COUNTRY||REGION_PROVINCE)>-1)
				// return findCity || {
				// 	cityName:REGION_CITY
				// }
				const findCity = this.allCityList.find(val=>val.cityName.indexOf(this.loginForm.cityName)>-1)
				return findCity || {
					cityName:this.loginForm.cityName
				}
			}
		},
		async onLoad(option) {
			await getDetail({
				...option,
				uid:this.loginForm.uid
			},'mallProduct',this.apiModule,'thirdGet').then(data=>{
				this.item = data
				this.getCitys();
				this.$u.mpShare = {
					title: data.name,
					imageUrl:this.imgFilter(data.image)
				}
			})
			await getDetail({
				productId:this.item.productId ,
				size:5
			},'storeProductReply','shopApi','').then(data=>{
				this.replyList = data.content;
				this.replyListTotal = data.totalElements
			})
			// this.amapPlugin = new amap.AMapWX({
			// 	key: 'd4e796cdedd6a14b84e9de811795d1e5'  //该key 是在高德中申请的微信小程序key
			// });
			// this.amapPlugin.getRegeo({
			// 	type: 'gcj02', //map 组件使用的经纬度是国测局坐标， type 为 gcj02
			// 	success:(res)=> {
			// 		this.aois = formatLocation(res)
			// 	}
			// })
			// console.log(this.amapPlugin)
			// uni.getLocation({
			// 	type:"gcj02",
			// 	geocode:true,
			// 	success: (res) => {
			// 		console.log(res)
			// 	}
			// })
		},
		methods:{
			getCitys(){
				getList({
					productId:this.item.productId,
					isLetterSort:false
				},'product','shopApi','getCitys').then(res=>{
					this.allCityList = res;
					this.cityList = res.slice(0,7);
				})
			},
			moreReply(){
				this.$u.route({
					url:"/pagesA/goodsReplyList/goodsReplyList",
					params:{
						productId:this.item.productId
					}
				})
			},
			// 更多城市
			moreCity(){
				this.$u.route({
					url:"/pagesA/itemDetail/allCity",
					params:{
						label:'全部城市',
						type:'edit',
						id:this.item.productId
					}
				})
			},
			splitStr(str){
				return str&&str.split(',') || []
			},
			submit(){
				this.loginValidate().then(res=>{
					this.settlement([{
						productId:this.item.productId,
						mallProductId:this.item.mallProductId,
						productNum:1
					}])
				})
			},
			//添加到购物车
			addCar(){
				const item = this.item
				this.loginValidate().then(res=>{
					add({productId:item.productId,uid:this.loginForm.uid,cartNum:1,mallProductId:item.id,type:'script'},'cart',this.apiModule).then(res=>{
						this.$u.toast('添加成功')
					})
				})
			},
			//预览
			bannerListPreview(index){
				this.previewUrls(this.bannerList,index)
			},
			getIssue({uid}){
				this.$u.route({
					url:'/pagesA/issueDetail/issueDetail',
					params:{uid}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom{
		bottom:  calc(env(safe-area-inset-bottom) + 20px);
		left: 30rpx;
		right:30rpx;
	}
	.padding-env{
		padding-bottom: calc(env(safe-area-inset-bottom) + 70px);;
	}
</style>
